<template>
  <div class="publicize-my-order">
    <div class="table">
      <el-table v-loading="listLoading" :data="tableData" show-overflow-tooltip height="100%">
        <el-table-column prop="courseName" label="宣讲课程名称" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="link-button" @click="toDetails(row)">{{ row.courseName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="appointTime" label="预约日期" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" show-overflow-tooltip :formatter="statusFormatter" />
        <el-table-column prop="location" label="地点" width="120" show-overflow-tooltip />
        <el-table-column prop="expertId" label="专家" width="120" :formatter="expertFormatter" show-overflow-tooltip />
        <el-table-column prop="listenerCount" label="听众人数" width="120" show-overflow-tooltip />
        <el-table-column prop="linkMan" label="联系人" width="120" show-overflow-tooltip />
        <el-table-column prop="linkManTel" label="联系人电话" width="120" show-overflow-tooltip />
        <el-table-column prop="appointDescribe" label="预约说明" width="120" show-overflow-tooltip />
        <el-table-column label="操作" width="120" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="link-button" @click="toDetails(row)">查看详情</div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination :total="pager.total" v-model:current-page="pager.pageIndex" :page-size="pager.pageSize"
        @current-change="getList" prev-text="上一页" next-text="下一页" layout="prev, pager, next" background />
    </div>
  </div>
</template>
<script>
export default { name: 'personalCenterMyorder' }
</script>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { http } from '@/utils/http/index.js'
import usePager from '@/hooks/usePager.js'
import { useAuthStore } from '@/stores/modules/auth';

const authStore = useAuthStore()

const router = useRouter()

onMounted(() => {
  getList()
  getExpertList()
})
/* 表格数据 */
const tableData = ref([])

// 分页钩子
const { pager, listLoading, proxyFun } = usePager(15, '/Preach/GetPreachOrderList')

const params = ref({
  dfi: {
    logic: 0,
    filters: [
      { field: 'CreateUserId', operator: 8, value: authStore.userInfo.uid }
    ]
  }
})

const getList = () => {
  proxyFun(params.value).then(res => {
    tableData.value = res.result.dataLst
  })
}

/* 跳转详情 */
const toDetails = (row) => {
  let { href } = router.resolve({
    path: "/personal-center/publicize-order-manage/publicize-evaluate",
    query: { id: row.id }
  })
  window.open(href, "_blank")
}

const expertList = ref([])
const expertPageIndex = ref(1)
const expertPageSize = ref(1000)
const getExpertList = () => {
  let params = {
    pageIndex: expertPageIndex.value,
    pageSize: expertPageSize.value
  }
  http.$POST(`/TheoryStudyM/GetExpertInfoList`, params).then(res => {
    expertList.value = expertList.value.concat(res.result.dataLst)
    if(res.result.countAll > res.result.pageIndex * res.result.pageSize){
      expertPageIndex.value = expertPageIndex.value + 1
      getExpertList()
    }
  })
}

/* 过滤专家字段 */
const expertFormatter = (row, column, cellValue) => {
  let obj = expertList.value.find(item => item.id == cellValue)
  return obj ? obj.name : ''
}

/* 过滤状态字段 */
const statusFormatter = (row, column, cellValue) => {
  if (cellValue == 0) return '待确认'
  if (cellValue == 1) return '已确认'
  if (cellValue == 2) return '已拒绝'
  if (cellValue == 3) return '已取消'
  if (cellValue == 4) return '待专家确认'
  if (cellValue == 5) return '待企业确认'
}
</script>

<style lang="scss" scoped>
.publicize-my-order{
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 32px 36px;

  .table {
    width: 100%;
    flex: 1;
    height: 0;

    :deep(.el-table) {
      .el-table__header {
        thead {
          th {
            background-color: #F6F6F6;
            color: #666666;
            font-weight: 600;
            font-size: 14px;
            height: 55px;
          }
        }
      }
    }
  }

  .link-button {
    color: #508CDE;
    cursor: pointer;

    &+span {
      margin-left: 10px;
    }
  }

  .pagination {
    padding-top: 30px;

    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>